<template>
<div class="look-container swiper-no-swiping">
    <div class="look">
            <div><img src="@/assets/imgs/look.png" alt=""></div>
            <div class="swiper-container look-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in LookList" :key="item.id">
                        <span class="content">{{item.content}}</span>
                        <div class="look-pic" :style="'background-image:url('+item.url+')'"></div>
                    </div>
                   
                </div>
            </div>
    </div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name:'HomeLook',
  props:{
    LookList:Array
  },
  mounted() {
    new Swiper(".look-swiper", {
        direction: 'vertical',
        loop: true,
        autoplay: 3000
    })

  },
}

</script>
<style lang="scss" scoped>
.look-container{
    margin-top: rem(22);
    padding:0 rem(22);
    .look{
        display: flex;
        width: 100%;
        height: rem(130);
        padding: rem(20);
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        div:first-child {
            float: left;
            width: rem(220);
            height: rem(65);
            line-height: 30px;
            padding: rem(10);
            border-right: 1px solid #f1f1f1;
            vertical-align: middle;
            img {
                width: rem(180);
                height: rem(65);
                margin: 0 auto;
            }
        }
        .swiper-container {
            float: left;
            flex: 1;
            height: rem(130);
            margin-left: rem(10);
            .swiper-wrapper{
                width: 100%;
                .swiper-slide{
                    width: 100%;
                    display: flex;
                .content {
                flex: 1;
                min-width: 1px;
                margin-top: rem(-25);
                height: rem(130);
                line-height: rem(50);
                font-size: rem(35); 
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-pack: start;
                -webkit-box-align: center;
                
                display: -moz-box;
                -moz-box-orient: horizontal;
                -moz-box-pack: start;
                -moz-box-align: center;
                
                display: -o-box;
                -o-box-orient: horizontal;
                -o-box-pack: start;
                -o-box-align: center;
                
                display: -ms-box;
                -ms-box-orient: horizontal;
                -ms-box-pack: start;
                -ms-box-align: center;
                
                display: box;
                box-orient: horizontal;
                box-pack: center;
                box-align: center;
                                
                                
                                }
                .look-pic {
                width: rem(150);
                height: rem(70);
                right: 5px;
                border-radius: 5px;
                background:  no-repeat 50% 50%;
                background-size: auto 100%;
                }
                }
                
                
                
            }
            
        }
    }
    
}


</style>